<template>
	<uni-popup ref="popup" type="dialog">
		<view class="dialog-wrap">
			<view class="title">{{title}}</view>
			<view class="cont">
				<view class="input-box flex_s">
					<input :value="localValue" @input="handleInput" />
				</view>
				<view class="tips">{{$t('home.tips-regular')}}</view>
			</view>
			<view class="btn-box flex_a">
				<view class="btn-item flex_col" @tap="close">{{$t('home.btn-cancel')}}</view>
				<view class="btn-item flex_col active" @tap="confirm">{{$t('home.btn-modify')}}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'PopupInput',
		props: {
			title: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				localValue: this.value // 初始化本地值
			}
		},
		watch: {
			value(newValue) {
				this.localValue = newValue;
			}
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			confirm() {
				this.$emit('confirm', this.localValue);
				this.$refs.popup.close();
			},
			handleInput(event) {
				this.localValue = event.target.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dialog-wrap {
		text-align: center;
		padding: 50rpx;
		background: #fff;
		border-radius: 20rpx;
		width: 80%;
		margin: auto;

		.title {
			color: #999999;
		}

		.cont {
			line-height: 51rpx;
			margin: 40rpx 0;

			.input-box {
				background: #EBEBEB;
				border-radius: 15rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

				input {
					text-align: left;
				}

				.item-icon-e {
					width: 39rpx;
					height: 24rpx;
				}
			}

			.tips {
				font-size: 22rpx;
				color: #999999;
				margin-top: 13rpx;
			}
		}

		.btn-box {
			.btn-item {
				width: 244rpx;
				height: 80rpx;
				background: #E4E4E4;
				border-radius: 15rpx;
				text-align: center;
			}

			.active {
				background: #AF9453;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
</style>